<template>
  <div class="home">
    <div>老陈带我的第{{date}}天</div>
    <div>我消费了{{money}}元</div>
    <!-- <p>{{num}}</p> -->
    <button @click="add">时间累加器</button>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex';
export default {
  name: 'HomeView',
  components: {

  },
  computed:{
    // ...mapState(['day','num']),
    ...mapState({
      date: state => state.day
    }),
    ...mapGetters(['money'])
  },
  created() {
    this.getList();
    // this.run();
  },
  methods: {
    // ...mapMutations(['timeAdd','run']),
    ...mapMutations({
      add: 'timeAdd'
    }),
    ...mapActions(['getList'])
  },
}


// 什么是es6? es6 是 js 标准。es7,8,9,10

// es6新怎那些东西？
// 1.let const 2.解构赋值。3.扩展运算符
// let obj = {name:'张三',age:18};
// let obj1 = {explan: '吃饱就睡'};
// let obj3 = {eat:'满汉全席'}
// let obj2 = {name:obj.name,age:obj.age,explan:obj1.explan};
// Object.assign 合并对象
// let obj2 = Object.assign(obj,obj1,obj3);
// console.log(obj2);

// 扩展运算符合并
// let obj2 = {...obj,...obj1,...obj3};
// console.log(obj2);
// ... 扩展运算符，相当于脱外套
// let arr = [5,6,7,8];
// let arr1 = [1,2,3,4];
// let arr2 = [...arr,...arr1];
// console.log(arr2);
// console.log(5,6,7,8);
// console.log(...arr);





// 解构赋值?

// let a = 1,b = 2,c = 3;
// console.log(a,b,c);
// 数组的解构赋值，注意数组的解构赋值，只和位置有关系；
// let [b,a,c] = [10,20,30,40];
// let [b,a,...c] = [10,20,30,40];
// console.log(a,b,c);

// 对象的解构赋值 (只和属性名有关系，和位置无关)
// let {age,name,fn} = {name:'王五',age:18,fn:()=>{}};
// console.log(name,age);
// console.log(fn);



// join（数组的方法） 的用法？// 把数组转换成字符串 参数是连接方式
// let arr = [10,20,30,40];
// console.log(arr.join('-'));
</script>
